<template>
  <span class="user_list" @click.stop="$emit('change', id)">
    <el-image v-if="path" class="tent_image" fit="cover" :src="$config.imgUrl+path">
    </el-image>
    <img v-else class="tent_image" src="@/assets/images/morenImg.png">
    <span class="but">{{name}}</span>
    <i v-if="!disabled" @click.stop="$emit('close', id)" class="el-icon-circle-close"></i>
  </span>
</template>

<script>
export default {
  props: ["path", "name", "id", "disabled"],
};
</script>

<style lang="scss" scoped>
.user_list {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  height: 35px;
  padding: 0 5px;
  margin: 5px 3px;
  border-radius: 5px;
}
.el-icon-circle-close {
  margin-left: 5px;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    color: red;
  }
}
.tent_image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}
.but {
  color: #336ffc;
  padding: 3px;
  cursor: pointer;
  &:hover {
    color: #477fff;
  }
}
</style>
